<template>
  <div style="background:#f3f3f3">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="options">
          <span class="mint-button-icon">
            <i class="mintui mintui-back"></i>
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">设备维修审批</h1>
      <div class="mint-header-button is-right"></div>
    </header>
    <!-- <div style="height:40px" /> -->
    <!-- <div>{{equilist.length}}</div> -->
    <div style="padding:10px 15px;background:#fff">
      <div style="white-space:nowrap;">
        <mt-field v-model="repairData.content" class="mtfield" style label="*故障现象与维修要求:" placeholder="输入内容" />
        <mt-field label="*设备:" style="border-bottom:1px solid #ddd">
          <mt-button type="default" size="small" @click="addshebei">+添加</mt-button>
        </mt-field>
        <!-- <picker :pictitle="'设备'" :picdata="picdata"></picker>
        <div style="text-align:right;margin-right:10px;">
          <span style="color:blue;" @click="addshebei">+添加</span>
        </div>-->
        <div class="sbdata">
          <span style="margin-left:6px;">已选设备：</span>
          <div>
            <div v-for="(item, index) in shebei" :key="index" style="display:initial">
              <span class="delright" @click="deletesb(index)">删除</span>
              <span style="display:block;width:100%">{{ item.hash.ep_ename }}_{{ item.hash.managenum }}</span>
              <div style="clear:both" />
            </div>
          </div>
        </div>
        <mt-field label="*申请时间:">
          <span style="color:#000" @click="addtime">{{ grantime }}</span>
        </mt-field>
        <picker :values="itemdata" :picdata="itemdata" class="rd_picker" pictitle="*处理方式:" @getpicval="getrepair" />
        <mt-field v-model="repairData.amount" label="*申请金额(元):" placeholder="输入申请金额" />
        <mt-field v-model="repairData.shop" label="*服务商家:" placeholder="输入服务商家" />
        <mt-field v-model="repairData.beizhu" style="margin-left:8px;" label="维修备注:" placeholder="输入维修备注" />
        <div style="margin:0 10px;border-top:1px solid #ddd;padding-top:10px">
          <span style="display:block;height:30px">上传附件：</span>
          <div style="width:100%;display:flex;flex-wrap:wrap;">
            <div v-for="(item, index) in filearr1" :key="index" style="width:20%;padding:0 5px;">
              <uploadpic :imagefile.sync="filearr1[index]" />
            </div>
          </div>
        </div>
        <chouseperson :atypeid="'0106'" :num="repairData.amount" @getspl="getspl" />
      </div>
      <div class="btn_f">
        <mt-button type="default" style="width:100px;margin-right:15px" @click="goback">取消</mt-button>
        <mt-button type="primary" style="width:100px" @click="submitrepair">确定</mt-button>
      </div>
    </div>
    <mt-popup v-model="popupVisible4" position="left" class="mint-popup" style="width:100%;height:100%;">
      <mt-header :title="titless" style="font-size:18px">
        <router-link to slot="left">
          <mt-button icon="back" @click="option" style="font-size:15px">返回</mt-button>
        </router-link>
      </mt-header>
      <div style="padding:10px;">
        <input v-model="managenum" type="text" placeholder="输入设备名称" style="width:80%;margin:20px 0 0 20px;" />
        <span style="display:inline-block;background:#26a2ff;padding:5px;color:#fff;border-radius:5px" @click="searchsb">查询</span>
      </div>
      <div style="padding:10px;">
        <div v-if="managenum==''||beginval==0" style="text-align:center">暂无数据</div>
        <div v-else>
          <div v-for="(item, index) in shebei2" :key="index" style="line-height:30px;background:#ddd;border-radius:5px;margin-bottom:5px;padding:5px;">
            <span style="display:inline-block;padding-left:10px;width: 85%;">{{item.hash.ep_ename}}--{{ item.hash.managenum }}</span>
            <span style="display:inline-block;float:right;color:blue" @click="addsb(item)">+添加</span>
          </div>
        </div>
      </div>
    </mt-popup>
    <mt-popup v-model="popupVisible22" position="bottom" class="mint-popup" style="width:100%">
      <mt-picker :slots="dataList" :visible-item-count="5" :show-toolbar="true" value-key="cName" @change="onDateChange">
        <mt-button class="sure" style="display:block;position: absolute;right: 0px;" @click="handleConfirm2">确认</mt-button>
      </mt-picker>
    </mt-popup>
    <div class="datePicker">
      <mt-datetime-picker ref="picker" :start-date="new Date()" :visible-item-count="5" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm" @visible-change="closepicker" />
    </div>
  </div>
</template>
<script>
import nheader from '~/components/nheader.vue'
import picker from '~/components/picker.vue'
import uploadpic from '~/components/uploadpic.vue'
import chouseperson from '~/components/chouseperson.vue'
import chousebumen from '~/components/chousebumen.vue'
export default {
  components: {
    nheader,
    uploadpic,
    chouseperson,
    chousebumen,
    picker
  },
  data () {
    return {
      ts: this.newStore(),
      chouseval: '',
      popupVisible22: false,
      popupVisible4: false,
      chousname: [],
      grantime: this.formatDate(new Date()),
      filearr1: [{}, {}, {}, {}, {}],
      repairData: {
        amount: ''
      },
      filename: {
        name: '点我上传'
      },
      managenum: '',
      htitle: '设备维修审批',
      itemdata: [],
      usedetail: '',
      carid: '',
      shenpi: '',

      beginval: 0,
      shebei: [],
      shebei2: [],
      shebeiid: [],
      titless: '查询设备',
      dataList: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'right'
        }
      ],
      aid: '',
      handler: function (e) {
        e.preventDefault()
      },
    }
  },
  created () {
    this.getshebei()
  },
  computed: {
    summoney () {
      let a = 0
      console.log(this.repairData, 'sum')
      for (let i = 0; i < this.repairData.length; i++) {
        a += Number(this.repairData[i].amount)
      }
      return a
    }
  },
  mounted () {
    this.shebei = []
    console.log(this.shebei, 'this.shebei')
  },
  methods: {
    goback () {
      this.$router.push({ name: 'approval2', query: { name: '申请' } })
    },
    deletesb (index) {
      this.shebei.splice(index, 1)
    },
    addsb (item) {
      console.log(item, 'item')
      this.shebei.push(item)
      this.popupVisible4 = false
      console.log(this.shebei, 'shebei')
    },
    searchsb () {
      const req = {
        handle: 'DD5D108B99FC12B72DC0B97F927BBE3D1A8639331D9DCC49',
        managenum: this.managenum
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        console.log(req, 'req')
        this.shebei2 = ts.d.data.operation1
        this.beginval = 1
      })
    },
    option () {
      this.popupVisible4 = false
    },
    addshebei () {
      this.popupVisible4 = true
      // const req = {
      //   handle: 'DD5D108B99FC12B72DC0B97F927BBE3D1A8639331D9DCC49',
      //   ep_ename: this.ep_ename
      // }
      // this.spost(this.ts, '/mainservlet', req).then(ts => {
      //   this.shebei = ts.d.data.operation1
      // })
    },
    checksplnum (money2, splid) {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EF3277431D02D636A5015C1425899A1F59A41CF7A197311E4A',
        flowid: splid,
        number: money2
      }
      const p = this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.data.operation1[0].hash.cou == '0') {
          this.flag = false
        } else {
          this.flag = true
        }
      })
      return p
    },
    //提交
    submitrepair () {
      if (
        this.repairData.content == '' ||
        this.repairData.content == undefined
      ) {
        this.$messagebox('提示', '请输入内容')
        return
      }
      if (this.shebei.length == 0) {
        this.$messagebox('提示', '请选择设备')
        return
      }
      if (this.grantime == '请选择时间' || this.grantime == undefined) {
        this.$messagebox('提示', '请选择申请时间')
        return
      }
      if (this.repairData.detype == '' || this.repairData.detype == undefined) {
        this.$messagebox('提示', '请选择处理方式')
        return
      }
      if (this.repairData.amount == '' || this.repairData.amount == undefined) {
        this.$messagebox('提示', '请选择申请金额')
        return
      }
      if (this.repairData.shop == '' || this.repairData.shop == undefined) {
        this.$messagebox('提示', '请输入服务商家')
        return
      }
      if (this.aid == '' || this.aid == undefined) {
        this.$messagebox('提示', '请选择审批流')
        return
      }
      this.checksplnum(this.repairData.amount, this.aid).then(() => {
        // if (this.flag == false) {
        //   this.$messagebox('提示', '审批流不符合条件，请重新选择')
        //   return
        // }
        this.$messagebox
          .confirm('确认提交设备维修审批')
          .then(action => {
            const req = {
              handle:
                '9000B8B8D347526960C5BAB1FB6894EF8B7B312373E9BEF47A8517CE4098C19A',
              atype: '0106',
              flowid: this.aid
            }
            this.spost(this.ts, '/mainservlet', req).then(ts => {
              const req2 = this.repairData
              req2.examinetime = this.grantime
              req2.aid = ts.d.data.operation3[0].hash.approvalid
              req2.handle =
                '9DEA590540016AF56AA8E4B54801438BB3F2193D08E31332D5E5601D2F82C2E61C2EAA69CA7B1203'

              req2.bigamount = this.convertCurrency(this.repairData.amount)
              req2.detype = this.repairData.detype
              req2.fileurl = this.posturl(this.filearr1)
              req2.filename = this.postname(this.filearr1)
              for (let m = 0; m < this.shebei.length; m++) {
                this.shebeiid.push(this.shebei[m].hash.id)
              }
              req2.cccid = this.shebeiid
              this.spost(this.ts, '/mainservlet', req2).then(() => {
                this.$messagebox('提示', '设备维修审批成功')
                this.$router.push({ name: 'jbrhome', query: { name: '' } })
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      })
    },
    posturl (arr) {
      const a = []
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url)
      }
      return a
    },
    // 金额转大写
    convertCurrency (money) {
      // 汉字的数字
      const cnNums = new Array(
        '零',
        '壹',
        '贰',
        '叁',
        '肆',
        '伍',
        '陆',
        '柒',
        '捌',
        '玖'
      )
      // 基本单位
      const cnIntRadice = new Array('', '拾', '佰', '仟')
      // 对应整数部分扩展单位
      const cnIntUnits = new Array('', '万', '亿', '兆')
      // 对应小数部分单位
      const cnDecUnits = new Array('角', '分', '毫', '厘')
      // 整数金额时后面跟的字符
      const cnInteger = '整'
      // 整型完以后的单位
      const cnIntLast = '元'
      // 最大处理的数字
      const maxNum = 999999999999999.9999
      // 金额整数部分
      let integerNum
      // 金额小数部分
      let decimalNum
      // 输出的中文金额字符串
      let chineseStr = ''
      // 分离金额后用的数组，预定义
      let parts
      if (money == '') {
        return ''
      }
      money = parseFloat(money)
      if (money >= maxNum) {
        // 超出最大处理数字
        return ''
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger
        return chineseStr
      }
      // 转换为字符串
      money = money.toString()
      if (money.indexOf('.') == -1) {
        integerNum = money
        decimalNum = ''
      } else {
        parts = money.split('.')
        integerNum = parts[0]
        decimalNum = parts[1].substr(0, 4)
      }
      // 获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        let zeroCount = 0
        const IntLen = integerNum.length
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1)
          const p = IntLen - i - 1
          const q = p / 4
          const m = p % 4
          if (n == '0') {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0]
            }
            // 归零
            zeroCount = 0
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q]
          }
        }
        chineseStr += cnIntLast
      }
      // 小数部分
      if (decimalNum != '') {
        const decLen = decimalNum.length
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1)
          if (n != '0') {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }
      if (chineseStr == '') {
        chineseStr += cnNums[0] + cnIntLast + cnInteger
      } else if (decimalNum == '') {
        chineseStr += cnInteger
      }
      return chineseStr
    },
    closeTouch () {
      document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false })//阻止默认事件
    },
    openTouch () {
      document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false })//打开默认事件
    },
    closepicker (val) {
      if (val) {
        this.closeTouch()
      } else {
        this.openTouch()
      }
    },
    // 公共方法图片数组转名称数组
    postname (arr) {
      const b = []
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name)
      }
      return b
    },
    getrepair (val) {
      this.repairData.detype = val.showid
    },
    // 获取处理方式
    getshebei () {
      // this.eqList1 = [];
      const req = {
        handle:
          '67A5B6FEF17D97DECF116BDF95B95C0B7D59D38996D29503FD58B6E268D37EF8',
        codetype: '04',
        supid: '0404'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        // console.log(ts.d.data, "00000000");
        // this.itemdata = ts.d.data.operation1
        let a = []
        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          b.showname = ts.d.data.operation1[index].hash.code_name
          b.showid = ts.d.data.operation1[index].hash.code_id
          a.push(b)
        }
        this.itemdata = a
      })
    },
    getspl (val) {
      this.aid = val.id
    },
    addqjtime () {
      this.$router.push({
        name: 'jbrtime'
      })
    },
    addcarid () { },
    addqjtime2 () {
      this.$router.push({
        name: 'jbrbxson'
      })
    },
    //获取牌照且添加牌照

    //mint时间选择器开始
    addtime () {
      this.$refs.picker.open()
    },
    getcarlist () {
      const req = {
        handle: '0E56125B90D2898A62E387C1CED62EC408B04B35BD44D675',
        query: ''
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          const a = {}
          a.value = ts.d.data.operation1[index].hash.carid
          a.id = ts.d.data.operation1[index].hash.carid
          a.id2 = ts.d.data.operation1[index].hash.carno
          this.jbrList.push(a)
        }
        this.popupVisible22 = true
      })
    },
    options () {
      this.$router.push({
        name: 'approval2',
        query: {
          name: ''
        }
      })
    },
    deletime (index) {
      console.log(index)
      this.timedata.splice(index, 1)
      console.log(this.timedata)
    },
    //时间赋值
    handleConfirm (data) {
      console.log(data)
      this.grantime = this.formatDate(data)
    },
    //时间选择优化函数
    formatDate (date) {
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },
    handleConfirm2 () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handler, { passive: false })
      //this.chouseval = this.$refs.picker.getValues()[0]
      this.popupVisible22 = false
    },
    //赋值
    onDateChange (picker, values) {
      //console.log(picker)
      //console.log(values)
      this.chouseval = values
      for (let k = 0; k < this.chousname.length; k++) {
        if (this.chouseval == this.chousname[k].carno) {
          this.chouseid = this.chousname[k].carid
        }
      }
    }
  }
}
</script>
<style scoped>
.mint-field-core {
  text-align: right;
}
.timeright {
  display: inline-block;
  float: right;
}
.timeitem {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.btn_f {
  margin: 10px;
  text-align: center;
}
.qjtime {
  padding: 0 10px;
  line-height: 25px;
}
.qjcolor {
  color: blue;
  display: inline-block;
  float: right;
}
.sbdata {
  margin: 10px;
  line-height: 25px;
}
.delright {
  float: right;
  color: red;
  padding-left: 5px;
}
.mtfield {
  display: flex;
  flex: 1;
}
.picker-center-highlight {
  position: absolute;
  top: 50% !important;
}
.picker-item {
  position: relative;
  top: 35px !important;
}
</style>
